/*
 *  Copyright 2022 Collate.
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *  http://www.apache.org/licenses/LICENSE-2.0
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

@import (reference) '../variables.less';

.form-container {
  background-color: @white;
  padding: 28px 20px;
  border-width: 1px;
  border-radius: 8px;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.04);
  width: 700px;
}

.form-item-horizontal {
  .ant-form-item-row {
    flex-direction: row;
    .ant-form-item-label {
      display: block;
      flex: 0 0 40%;
      max-width: 40%;
      padding: 0px;
      align-self: center;
    }
    .ant-form-item-control {
      display: block;
      flex: 0 0 60%;
      max-width: 60%;
    }
  }
}
.form-item-vertical {
  .ant-form-item-row {
    flex-direction: column;
  }
}

// As per out design we need to show it on right side of the label
// Hide the default required mark
.ant-form-item-label
  > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
  content: '';
}

// Move the required mark to the right side of the label
.ant-form-item-label
  > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::after {
  display: inline-block;
  margin-left: 4px;
  color: #ff4d4f;
  font-size: 14px;
  line-height: 1;
  content: '*';
}

.new-form-style {
  .ant-input,
  .ant-picker,
  .ant-input-number,
  .ant-mentions,
  .ant-cascader-picker,
  .ant-tree-select-selector,
  .ant-upload.ant-upload-drag,
  .ant-select:not(.ant-select-customize-input) .ant-select-selector,
  .ant-btn.ant-btn-default:not(:hover),
  .block-editor-wrapper.block-editor-wrapper--bar-menu {
    border-color: @grey-300;
    border-radius: @border-rad-xs;

    &:hover,
    &:focus {
      border-color: @primary-5;
    }
  }
  .block-editor-wrapper.block-editor-wrapper--bar-menu {
    .bar-menu-wrapper {
      border-top-left-radius: @border-rad-xs;
      border-top-right-radius: @border-rad-xs;
      border-color: @grey-300;
    }
    .om-block-editor {
      border-bottom-left-radius: @border-rad-xs;
      border-bottom-right-radius: @border-rad-xs;
      border-color: @grey-300;
    }
  }

  .ant-switch {
    background-color: @grey-100;
    border-color: @grey-100;
  }

  .ant-switch-checked {
    background-color: @primary-6;
  }
  .ant-switch-checked .ant-switch-handle::before,
  .ant-switch-handle::before {
    background-color: @white;
  }
  .form-switch-container .ant-typography,
  .ant-form-item-label > label,
  .form-label-title {
    color: @grey-700;
    font-weight: @font-medium;
    font-size: @font-size-base;
  }

  // Right align Required label
  .ant-form-item-label > label.ant-form-item-required::before {
    display: none;
  }
  .ant-form-item-label > label.ant-form-item-required::after {
    display: inline-block;
    margin-left: 4px;
    color: @highlight-color;
    font-size: 14px;
    font-family: SimSun, sans-serif;
    line-height: 1;
    content: '*';
  }
}
